<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar page-my">
			<!-- 会员信息 -->
			<view v-if="isLogin" class="my-member">
				<view class="bar-height" :style="'height:'+ barHeight + 'px'"></view>
				<view class="box flex-row-between flex-start" :style="'height:'+ (userType == 1 ? 220 : 290) + 'rpx'">
					<view class="photo bg-cover" :style="{backgroundImage: 'url(' + userInfo.user.avatar + ')'}">
						<button class="btn flex-row-center" @click="updatePhoto">更新头像</button>
					</view>
					<view class="member flex-column-between" :style="{height: userType == 1 ? '140rpx' : '120rpx'}">
						<view class="flex-row-start">
							<text class="font18">{{userInfo.user.name}}</text>
							<image mode="heightFix" class="level" :src="imgPath + userInfo.user.card_ico"
								@click="updateLevel"></image>
						</view>
						<view class="font12">{{userType == 1 ? ('员工-' + userInfo.user.hotel) : '会员'}}</view>
						<view class="font12 tel">{{userInfo.user.mobile}}</view>
					</view>
					<view class="btns flex-column-between">
						<view>
							<uni-icons v-if="userInfo.user.write_off == 1" type="scan" size="18" color="#eed1a6"
								@click="Onscan"></uni-icons>
							<uni-icons type="gear" size="18" color="#eed1a6" @tap="goNext('/pages/my/set')"></uni-icons>
						</view>
						<view v-if="userInfo.signIn == 1 || userInfo.signIn == '1'" class="sign"
							@tap="goNext('/pages/integral/signIn')">签到</view>
					</view>
				</view>
			</view>
			<view v-else class="my-member" @click="goNext('/pages/common/login')">
				<view class="bar-height" :style="'height:'+ barHeight + 'px'"></view>
				<view class="box flex-row-between flex-start">
					<view class="photo bg-cover" :style="{backgroundImage: 'url(' + photo + ')'}"></view>
					<view class="member flex-row-between">
						<view class="font17 font-ffffff">未登录</view>
						<uni-icons type="arrowright" size="14" color="#7f7f7f"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 升级信息 -->
			<view v-if="isLogin && userType == 2" class="my-update">
				<view class="part1">
					<view class="p1 font14 font-b">{{highest_level ? '' : '升级'}}{{userInfo.card.name}}</view>
					<view class="p2 font12">{{userInfo.notice}}</view>
				</view>
				<view class="part2 flex-row-start">
					<view class="item" v-for="(item, index) in userInfo.card.equity" :key="index" v-if="index < 3">
						{{item}}</view>
				</view>
				<view v-if="!highest_level" class="btn"
					@tap="goNext('/pages/common/update?mode=update&updateId=' + userInfo.card.id)">立即升级</view>
			</view>
			<view v-if="!isLogin" class="my-rights flex-row-between" @click="isLogin ? goNext('/pages/my/rights') : ''">
				<view>登录后享有更多权益</view>
				<view class="flex-row-end">
					<text class="txt">{{isLogin ? '查看详情' : '登录后查看详情'}}</text>
					<uni-icons type="arrowright" size="10" color="#323232"></uni-icons>
				</view>
			</view>
			<!-- 金额信息 -->
			<view class="my-number flex-row-between box-shadow" :style="{padding: userType == 1 ? '0' : '0 30rpx'}">
				<block v-for="(item, index) in numberInfo" :key="index">
					<view v-show="userType == 1 ? (index < 4) : (index < 3)" class="item flex-column-center"
						@tap="item.url ? goNext(item.url) : ''">
						<view class="font14 font-b">{{isLogin ? item.value : 0}}</view>
						<view class="font11 font-969696">{{item.title}}</view>
					</view>
				</block>
			</view>
			<!-- 订单信息 -->
			<view class="my-order flex-row-between box-shadow">
				<block v-for="(item, index) in orderInfo" :key="index">
					<view v-if="sensitive ? (index < 4) : (index < 3)" class="item flex-column-center"
						@tap="goNext(item.url, item.tag, item.key)">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view>
				</block>
			</view>
			<!-- 广告位 -->
			<view v-if="sensitive && advs.length > 0" class="my-adv">
				<uni-swiper-dot :info="advs" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
					<swiper class="adv-swipe" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
						<swiper-item class="adv-swipe-item w100 h100" v-for="(item, index) in advs" :key="index">
							<view class="adv-swipe-img w100 h100 bg-cover"
								@click="goUrl(item.type, item.url, item.appid)"
								:style="{backgroundImage: 'url(' + imgPath + item.img + ')'}">
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 快捷入口 -->
			<view class="my-entry flex-row-start box-shadow flex-wrap flex-start">
				<block v-for="(item, index) in entryInfo" :key="index">
					<view v-if="index < 7" class="item flex-column-center"
						@tap="item.type == 'link' ? goNext(item.url) : (item.type == 'code' ? openCode() : '')">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view>

					<!--  #ifdef  MP-WEIXIN -->
					<!-- <button v-if="index == 7 && item.type == 'service'" class="item flex-column-center" open-type='contact' session-from=''>
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</button> -->
					<!--  #endif -->

					<!-- 联系我们 -->
					<!-- <view v-if="index == 7 && item.type == 'service'" class="item flex-column-center" @click="openService">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view> -->

					<!-- 拼团发货 -->
					<view v-if="index == 8 && userInfo.send_out_coupon == 1" class="item flex-column-center"
						@click="goNext(item.url)">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view>

					<!-- 业主订房 -->
					<view v-if="index == 9 && owner_manager == 1" class="item flex-column-center"
						@click="goNext(item.url)">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view>

					<!-- 协议订房 -->
					<view v-if="index == 10 && contract_manager == 1" class="item flex-column-center"
						@click="goNext(item.url)">
						<image class="icon" :src="item.image"></image>
						<view class="font11">{{item.title}}</view>
					</view>
				</block>
			</view>
			<view @click="onPath" v-if="userInfo&&userInfo.user&&userInfo.user.mobile == '18571599334'">测试跳转</view>
		</view>
		<!-- 底部菜单 -->
		<ComTabBar :selected="2" id="tabBar"></ComTabBar>
		<!-- 画布 -->
		<l-painter ref="painter" width="500rpx" height="726rpx" :isH5PathToBase64="true" isRenderImage
			@success="Onimgsuccess" style="position: fixed; left: 500%;" custom-style="position: fixed; left: 500%;" />
		<!-- H5二维码 -->
		<!--  #ifdef  H5 -->
		<canvas canvas-id="qrcode" style="width: 280rpx;height: 280rpx;position: fixed; left: 500%;" />
		<!--  #endif -->
		<!-- 我的二维码 -->
		<uni-popup ref="code" type="center">
			<view class="home_code">
				<uni-icons class="close" type="close" color="#ffffff" size="24" @click="closeCode"></uni-icons>
				<!--  #ifdef  MP-WEIXIN -->
				<view class="homeC_box bg-cover">
					<image class="homeC_headimgurl" :src="userInfo.user.avatar"></image>
					<view class="font-1e1e1e font13">{{userInfo.user.name}}</view>
					<image class="homeC_wxcode" :src="wxcode"></image>
					<view class="font-646464 font12">扫码识别</view>
				</view>
				<view class="homeC_button font-ffffff font14 flex-row-center" @click="OnsaveImage">保存至相册</view>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<image v-if="saveImageif" class="homeC_Image" :src="saveImage"></image>
				<view class="homeC_button font-ffffff font14 flex-row-center">长按图片保存至相册</view>
				<!--  #endif -->
			</view>
		</uni-popup>
		<!-- 客服弹窗 -->
		<uni-popup ref="service" type="center">
			<view class="popup-chance-box tc">
				<view class="p1 font15 font-b">咨询热线</view>
				<view class="p2 font20">400-626-2008</view>
				<view class="p3 font12">服务时间：08:00~20:00</view>
				<view class="flex-row-between">
					<view class="btn btn1" @click="closeService">取消</view>
					<view class="btn btn2" @click="makePhone">拨打</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ComTabBar from '@/components/j-ComTabBar/index.vue';
	import lPainter from '@/components/lime-painter/'
	import {
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components: {
			ComTabBar,
			lPainter
		},
		data() {
			return {
				barHeight: 0, // 状态栏+胶囊的高度
				isLogin: false, // 是否已登录
				photo: 'https://static.newbeaconhotels.com/app/hotel/my/photo.png', // 默认头像
				imgPath: this.$Config.http_static, // 图片头
				imgAvatar: this.$Config.http_avatar, // 头像域名
				// 金额信息
				numberInfo: [{
						title: '我的足迹',
						value: '0',
						url: '/pages/activity/brand/footprint'
					},
					{
						title: '我的积分',
						value: '0',
						url: '/pages/integral/record'
					},
					{
						title: '优惠券',
						value: '0',
						url: '/pages/coupon/myList'
					},
					{
						title: '纽扣中心',
						value: '0.00',
						url: '/pages/coin/index'
					}
				],
				// 订单信息
				orderInfo: [{
						title: '全部订单',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-order1.png',
						tag: true,
						url: '/pages/hotel/orderList',
						key: ''
					},
					{
						title: '待付款',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-order2.png',
						tag: true,
						url: '/pages/hotel/orderList',
						key: 'pay'
					},
					{
						title: '待评价',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-order3.png',
						tag: true,
						url: '/pages/hotel/orderList',
						key: 'normal'
					},
					{
						title: '我的拼团',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-order4.png',
						tag: false,
						url: '/pages/group/orderList'
					},
				],
				advs: [], // 广告位
				// 快捷入口
				entryInfo: [{
						title: '联系人',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list1.png',
						type: 'link',
						url: '/pages/my/contactList'
					},
					{
						title: '我的评论',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list2.png',
						type: 'link',
						url: '/pages/my/commentList'
					},
					{
						title: '收货地址',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list4.png',
						type: 'link',
						url: '/pages/my/addressList'
					},
					{
						title: '拉新记录',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list5.png',
						type: 'link',
						url: '/pages/activity/pullnew/record'
					},
					{
						title: '领券中心',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list6.png',
						type: 'link',
						url: '/pages/coupon/list'
					},
					{
						title: '我的奖品',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list7.png',
						type: 'link',
						url: '/pages/activity/common/prizeList'
					},
					{
						title: '我的二维码',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list9.png',
						type: 'code'
					},
					{
						title: '联系我们',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list11.png',
						type: 'service'
					},
					{
						title: '拼团发货',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list8.png',
						type: 'link',
						url: '/pages/group/deliver'
					},
					{
						title: '业主订房',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list10.png',
						type: 'link',
						url: '/pages/owner/hotelList'
					},
					{
						title: '协议订房',
						image: 'https://static.newbeaconhotels.com/app/hotel/my/icon-list12.png',
						type: 'link',
						url: '/pages/xieyi/hotelList'
					}
				],
				// 轮播图
				banners: [],
				bannerCurrent: 0,
				dotsStyles: {
					width: 6,
					height: 2,
					bottom: 5,
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '1px #ffffff solid'
				},
				// 用户信息
				userInfo: {},
				idInfo: {},
				userType: 2, // 1员工，2会员
				owner_manager: 0, // 是否业主管理员
				contract_manager: 0, // 是否协议用户
				highest_level: false, // 员工已是最高等级
				// 分享
				h5share: true, // 当前页面是否单独获取签名
				wxSdk: false, // H5签名是否成功（此页面用于唤起扫一扫）
				wxcode: '', // 小程序二维码
				wxcodeh5: '', // H5二维码
				saveImageif: false, // 图片成功
				saveImage: '', // 画图图片
				// 是否显示敏感板块（商城）
				sensitive: true
			}
		},
		onLoad: function() {
			// 从缓存中拿取各种id信息
			this.idInfo = uni.getStorageSync('idInfo')

			// 从缓存中拿取版本信息
			// #ifdef MP-WEIXIN
			this.sensitive = uni.getStorageSync('version').conshow
			// #endif

			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				if (res.code == 1) {
					this.wxSdk = true
					this.Onshare()
				} else {
					this.wxSdk = false
				}
			})
			// #endif

			// 广告位
			this.$Http({
				url: 'getImage',
				data: {
					tag: 'user'
				},
			}).then(res => {
				if (res.code == 1 && res.data.data) {
					this.advs = res.data.data
				}
			});
		},
		onShow: function() {
			// 隐藏默认菜单
			uni.hideTabBar()

			// 获取导航栏+状态栏的高度
			uni.getSystemInfo({
				success: (e) => {
					this.barHeight = this.customBar
					// #ifdef H5
					this.barHeight = 0
					// #endif
				}
			})

			// 获取用户信息
			let $token = uni.getStorageSync("token");
			if ($token) {
				this.$Http({
					url: 'user',
					token: true,
					load: true
				}).then(res => {
					if (res.code == 1) {
						this.isLogin = true
						this.userInfo = res.data
						console.log(this.userInfo, '???')

						// 是否管理员
						this.owner_manager = res.data.user.owner_manager

						// 是否协议用户
						this.contract_manager = res.data.user.contract_manager

						// 列表赋值
						this.numberInfo[0].value = res.data.hotel
						this.numberInfo[1].value = res.data.user.score
						this.numberInfo[2].value = res.data.coupon
						this.numberInfo[3].value = res.data.user.coin

						uni.setStorage({
							key: 'userInfo',
							data: res.data
						})

						let type = res.data.user.group
						if (type.indexOf('员工') >= 0) {
							this.userType = 1
						} else if (type.indexOf('会员') >= 0) {
							this.userType = 2
							// 是否最高等级
							this.highest_level = (res.data.card.name == res.data.user.my_level)
						}

						// 获取二维码
						// #ifdef MP-WEIXIN
						this.OngetWxcode()
						// #endif

						// 获取H5二维码
						// #ifdef H5
						this.OnH5wxcode()
						// #endif
					}
				});
			} else {
				this.isLogin = false
			}
		},
		methods: {
			handleContact(e) {
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			// 打开客服
			openService() {
				this.$refs.service.open()
			},
			// 关闭客服
			closeService() {
				this.$refs.service.close()
			},
			// 拨打电话
			makePhone(tel) {
				this.$refs.service.close()
				uni.makePhoneCall({
					phoneNumber: '400-626-2008'
				});
			},
			// 核销
			Onscan() {
				// #ifdef H5
				uni.setStorage({
					key: 'firstType',
					data: true
				})
				window.location.href = this.$Config.http_h5_url + '/pages/coupon/voloff'
				return
				// #endif

				// #ifdef MP-WEIXIN
				this.$Router.push('/pages/coupon/voloff')
				// #endif
			},
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag, key) {
				if (tag) {
					// 订单页面，要记录筛选的状态
					if (url == '/pages/hotel/orderList') {
						uni.setStorage({
							key: 'orderFilter',
							data: key
						})
					}
					uni.switchTab({
						url: url
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 广告跳转
			goUrl(type, url, appid) {
				this.$base.goUrl(type, url, appid)
			},
			// 打开我的二维码
			openCode() {
				if (this.isLogin) {
					this.$refs.code.open()
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			// 关闭我的二维码
			closeCode() {
				this.$refs.code.close()
			},
			//小程序获取二维码
			OngetWxcode() {
				let data = {};
				data.page = '/pages/common/login';

				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid

				if ($C) {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',Cid.' + $C
				} else {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F
				}

				this.$Http({
					url: 'getQrcode',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						this.wxcode = res.data.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
						// 画海报
						this.onCustom()
					}
				});
			},
			//H5海报二维码
			OnH5wxcode() {
				let that = this;
				let url = 'https://jd.newbeaconhotels.com/h5/jd/pages/common/login?scene=';
				let message_id = '';

				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid

				if ($C) {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',Cid.' + $C
				} else {
					message_id = 'Pid.' + $P + ',Fid.' + $F
				}

				console.log(url + message_id)
				uQRCode.make({
					canvasId: 'qrcode',
					text: url + message_id,
					size: uni.upx2px(280)
				}).then(res => {
					base64ToPath(res)
						.then(path => {
							that.wxcodeh5 = path
							that.onCustom()
						})
						.catch(error => {
							console.error(error)
						})
				}).finally(() => {

				})
			},
			//海报
			onCustom() {
				// 支持通过调用render传入参数
				const painter = this.$refs.painter
				var base = {
					width: '500rpx',
					height: '726rpx',
					views: [{
							type: 'image',
							src: 'https://static.newbeaconhotels.com/app/hotel/my/cbk.png',
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '500rpx',
								height: '726rpx'
							}
						},
						{
							type: 'image',
							src: this.imgAvatar + this.userInfo.user.avatar2,
							css: {
								left: '210rpx',
								top: '110rpx',
								width: '80rpx',
								height: '80rpx',
								radius: '40rpx',
								background: '#ffffff',
							}
						},
						{
							type: 'text',
							text: this.userInfo.user.name,
							css: {
								width: '500rpx',
								textAlign: 'center',
								color: '#1e1e1e',
								left: '0rpx',
								top: '220rpx',
								fontSize: '26rpx'
							}
						},
						{
							type: 'text',
							text: '扫码识别',
							css: {
								width: '500rpx',
								textAlign: 'center',
								color: '#646464',
								left: '0rpx',
								top: '590rpx',
								fontSize: '24rpx'
							}
						},
					]
				}
				let code = {}
				// #ifdef MP-WEIXIN
				code = {
					type: 'image',
					src: this.wxcode,
					css: {
						left: '110rpx',
						top: '300rpx',
						width: '280rpx',
						height: '280rpx',
					}
				}
				// #endif
				// #ifdef H5
				code = {
					type: 'image',
					src: this.wxcodeh5,
					css: {
						left: '110rpx',
						top: '300rpx',
						width: '280rpx',
						height: '280rpx',
					}
				}
				// #endif
				base.views.push(code)
				painter.render(base)
			},
			//画布图片成功没有
			Onimgsuccess(res) {
				this.saveImage = res
				this.saveImageif = true
			},
			//保存
			OnsaveImage(res) {
				let that = this
				if (this.saveImageif) {
					uni.saveImageToPhotosAlbum({
						filePath: that.saveImage,
						success(res) {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
							that.$refs.code.close()
						}
					})
				} else {
					uni.showToast({
						title: '海报生成中~',
						icon: 'none'
					});
				}
			},
			// 更新头像
			updatePhoto() {
				let that = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.userInfo.user.avatar = res.userInfo.avatarUrl
						that.$Http({
							url: 'setWxUser',
							type: 'POST',
							data: {
								user_id: that.userInfo.user.user_id,
								avatar: res.userInfo.avatarUrl,
								nickname: res.userInfo.nickName
							}
						}).then(res1 => {
							if (res1.code == 1) {
								uni.showToast({
									title: '更新成功',
									icon: 'success'
								})
							}
						})
					},
					fail: (res) => {
						//不同意不做任何处理
					}
				})
			},
			// 更新等级
			updateLevel() {
				this.$Http({
					url: 'userLevel',
					token: true,
					load: true
				}).then(res => {
					if (res.code == 1) {
						this.userInfo.user.card_ico = res.data.card_ico
						uni.showToast({
							title: '等级同步成功！'
						});
					}
				});
			},
			onPath() {
				wx.openOfficialAccountArticle({
					url: 'https://mp.weixin.qq.com/s/86SBYaYCt53-cNfHyR06EQ', // 此处填写公众号文章连接
					success: res => {},
					fail: res => {}
				})
				// uni.navigateTo({
				// 	url: '/pages/common/wxggh'
				// })
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>